<template>
	<!-- 搜索界面 -->
	<view>
		<view class="astop">
		<view class="search-cont">
			<view class="status" @click="navBack()"><i class="hxicon-back"></i></view>
			<view class="search">
				<input type="text" 
				placeholder-class="inputclass" 
				confirm-type ="search" 
				focus="true"
				placeholder="请输入关键字"
				v-model="searchdata"
				@confirm="onKeyInput"/>
			</view>
			<view class="search-code" @click="seArch()">
				搜索
			</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history" v-if="ifhistory">
			<view class="search-title">
				<view>搜索历史</view>
				<view @click="removeStorage()">
					<image src="../../static/img/main/delete.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- tab -->
			<view class="menu-block">
				<block v-for="(item,index) in setdata" :key="index">
					<view @click="menubtn(item)">{{item}}</view>
				</block>
			</view>
		</view>
		<!-- 内容展示 -->
		<view class="content-left"	v-if="shopcont">
			<mescroll-body ref="mescrollRef"  @init="mescrollInit" top="90" @down="downCallback" :up="upOption" @up="upCallback">
			<view class=" store-box" v-if="storeList">
				<view class=" item-box" v-for="(store,i) in storeList" :key="i">
					<view class="container top-box">
						<view class="left" @click="toStore(store.id)">
							<image :src="store.img_url" mode="aspectFill"></image>
						</view>
						<view class="right" @click="toStore(store.id)">
							
							<text class="tit" >{{store.md_name}}</text>
							<view class="row justify-content">
								<view class="row-left">
									<i class="hxicon-favorfill "></i>
									<text class="t1">{{store.md_pingfen}}</text>
									<text class="t2">月售{{store.md_sales}}</text>
								</view>
								<view class="row-right">
									<i class="hxicon-locationfill"></i>
									<text>{{store.dis}}</text>
								</view>
							</view>
							<view class="row">
								<text >起送￥{{store.md_qs_money}}</text>
								<text class="t2" v-if="store.md_ps_money > 0">配送￥{{store.md_ps_money}} </text>
								<text class="t2" v-else>免费配送</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// v-model和input输入框实现双向绑定
				searchdata:'',
				// 网络请求之后保存的数据
				takeshop:[],
				// 搜索历史
				setdata:[],
				// 搜索历史是否显示
				ifhistory: false,
				// 内容展示区
				shopcont: false,
				storeList:[],
				upOption: {
					 use: false, // 是否启用上拉加载; 默认true
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '', // 提示
						btnText: ''
					}
				},
			}
		},
		methods: {
			// 点击搜索按钮的函数
			seArch(){
				if(this.searchdata !== ''){
					this.ifhistory = false;
					this.searchData(this.searchdata);
					this.getStorage(this.searchdata);
				}
			},
			// 点击电脑回车键的触发的函数
			onKeyInput(e){
				if(e.detail.value !== ''){
					this.searchData(e.detail.value);
					this.getStorage(e.detail.value);
					this.ifhistory = false;
				}
			},
			// 发送请求搜索
			searchData(searchkey){
				if(searchkey){
					this.searchdata = searchkey;
					this.upCallback({num: 1, size: 10});
				}else{
					this.$toast('请输入关键字');
				}
				
				
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.endSuccess();
			},
			upCallback(page) {
				let reqInfo = {};
				reqInfo.loading=1;
				reqInfo.page = page.num;
				reqInfo.pageSize = page.size;
				reqInfo.action = 'GetIndexInfo';
				reqInfo.keywords =this.searchdata;
				
				this.$api.Default.getUserInfo(reqInfo,(res)=>{
					     
					     
					     for(let s of res.data.dplist){
							 if(s.img_url.indexOf('http') == -1){
								 s.img_url = this.$config.server+s.img_url;
							 }
							 s.dis = (s.dis/1000).toFixed(2)+'km';
						 }
						// this.mescroll.endSuccess(res.data.dplist.length);
						if(page.num == 1){
							this.storeList = [];
							if( res.data.dplist.length == 0){
								this.$toast('搜索条件为空');
							}else{
								this.shopcont =true;
							}
						} 
					    this.storeList=this.storeList.concat(res.data.dplist);
				},err=>{
						this.mescroll.endErr();	
				});
			},
			// 本地存入搜索历史
			getStorage(searchkey){
				// 本地缓存要是一个数组，而不是字符串
				// 1.先取出本地缓存的数据
				let seararray = uni.getStorageSync('search_key') || [];
				// 2.要存入一个数据
				seararray.unshift(searchkey);
				// 数组去重
				let setdataarr = Array.from(new Set(seararray));
				// 数据存入缓存中
				uni.setStorageSync('search_key',setdataarr);
			},
			// 取出本地缓存的数据
			setStorage(){
				let setdata = uni.getStorageSync('search_key');
				if(setdata.length <= 0){
					this.ifhistory = false;
				}else{
					this.setdata = setdata;
					this.ifhistory = true;
				}
			},
			// 手动清除搜索历史
			removeStorage(){
				this.ifhistory = false;
				uni.removeStorageSync('search_key');
				this.setStorage();
			},
			// 反馈提示
			tips(bull,tips){
				this.$nextTick(()=>{
					this.$refs.tips.init(bull,tips);
				})
			},
			// 点击搜索历史进行搜索
			menubtn(item){
				
				this.ifhistory = false;
				this.searchData(item);
			},
		   navBack(){
			if(getCurrentPages().length>1){
				uni.navigateBack();
			}else{
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.reLaunch({
					url: '/pages/index/index'
				});
				// #endif
			}
		 },
		 toStore(id){
		 	uni.navigateTo({
		 		url: '../store/index?id=' + id
		 	})
		 },
		},
		onShow() {
			//进入页面就触发
			this.setStorage();
		}
	}
</script>

<style scoped lang="scss">
	.content-left{
		margin: 0 20upx;
	}
	
	.search{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		background:#f8f8f8;
		border-radius: 20upx;
		margin-left: 20upx;
	}
		
	.search input{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 30upx;
		color: #666666; 
		padding-left: 30upx;
	} 
	.search-cont{
		display: flex; 
		justify-content: space-between; 
		height: 70upx; 
		align-items: center;
		padding: 30upx 0;
		margin-top: 15upx;
	}
	
	.search-code{
		width: 150upx; 
		height: 50upx; 
		text-align: center; 
		font-size: 30upx;
	}
	
	/* 搜索历史 */
	.search-history{
		margin: 20upx;
		padding-top: 100upx;
	}
	
	.search-title{
		font-size: 30upx; 
		font-weight: bold;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height: 60upx;
		line-height: 60upx;
	}
	
	.search-title image{
		width: 36upx; 
		height: 36upx; 
		display: block;
	}
	
	.menu-block view {
		background: #f7f8fa;
		border-radius: 6upx;
		font-size: 27upx;
		color: #292c33;
		text-align: center;
		padding: 10upx;
		margin: 20upx 20upx 0 0;
	}
	
	.menu-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.status{
		line-height: 35px;
		padding-left: 30upx;
		font-size: 18px;
	}
	
	.store-box{
		margin-top: 10px;
		.item-box{
			display: flex;
			flex-direction: column;
			margin-bottom: 10px;
			background-color: #ffffff;
			padding: 18px;
			.top-box{
				display: flex;
				flex-direction: row;
				.left{
					margin-right: 10px;
					
					
					image{
						width: 72px;
						height: 54px;
						border-radius: 6px;
					}
				}
				.right{
					flex: 1;
					.tit{
						font-size: 16px;
						font-weight: bold;
						color: #333333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.justify-content{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
					}
					.row{
						font-size: 12px;
						color: #999999;
						margin-top: 4px;
						.row-left{
							display: flex;
							flex-direction: row;
							.t1,i{
								color: #ffca3e;
							}
							
						}
						.t2{
							margin-left: 12px;
						}
						.row-right{
							display: flex;
							flex-direction: row;
							i{
								margin-right: 4px;
							}
						}
						
					}
				}
			}
			.bottom-box{
				&-container{
					margin: 12px 0 0;
					padding-left: 82px;
					
					white-space: nowrap;
					.goods-box{
						width: 80px;
						margin-left: 12px;
						display: inline-block;
						.img-box{
							position: relative;
							width: 80px;
							height: 60px;
							background-color: #f1f1f1;
							border-radius: 4px;
							image{
								width: 100%;
								height: 60px;
							}
							.tag{
								position: absolute;
								bottom: 0;
								left: 0;
								background-color: #FF5722;
								color: #ffffff;
								padding: 2px 4px;
								font-size: 12px;
								border-radius: 4px;
							}
						}
						.tit{
							font-size: 14px;
							margin-top: 4px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.price-box{
							margin-top: 4px;
							.txt1{
								font-size: 10px;
								color: #FF5722;
							}
							.txt2{
								font-size: 16px;
								color: #FF5722;
							}
							.txt3{
								margin-left: 6px;
								font-size: 10px;
								color: #bbbbbb;
								text-decoration: line-through;
							}
						}
					}
					.goods-box:last-child{
						margin-right: 12px;
					}
					
				}
				
			}
		}
		.item-box:last-child{
			border-bottom: 0;
		}
	}
	.astop{
		z-index: 9990;
		position: fixed;
		// top: --window-top; /* css变量 */
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
	}
</style>
